<template>
  <div class="dashboard-container">
    <div class="category" v-for="(category, index) in categories" :key="index">
      <div class="category-title">{{ category.title }}</div>
      <div class="row" v-for="(row, rowIndex) in category.rows" :key="rowIndex">
        <div class="dashboard-card" @click="goToH3Yun(category.title)" v-for="item in row" :key="item.value">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-value">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import {
  statW00000CountInfo,
  statDisinfectantCountInfo,
  statSludgeCountInfo,
  statElectricityCountInfo
} from '@/api/h3yun'

interface DashboardItem {
  title: string
  value: string
  unit: string
}

interface DashboardCategory {
  title: string
  rows: DashboardItem[][]
}

const props = defineProps<{
  areaCode: string,
}>()

watch(() => props.areaCode, () => {
  fetchData()
})

const loading = ref(true)
const error = ref(false)
const categories = ref<DashboardCategory[]>([])
const timer = ref<number | null>(null)

async function fetchData() {
  try {
    loading.value = true
    error.value = false

    const [
      waterData,
      disinfectantData,
      sludgeData,
      electricityData
    ] = await Promise.all([
      statW00000CountInfo(props.areaCode),
      statDisinfectantCountInfo(props.areaCode),
      statSludgeCountInfo(props.areaCode),
      statElectricityCountInfo(props.areaCode)
    ])

    categories.value = [
      {
        title: '排放水量',
        rows: [
          [
            { 
              title: '今日处理量', 
              value: waterData.data.todayCount.toString(),
              unit: waterData.data.todayCountUnit
            },
            { 
              title: '本月平均量',
              value: waterData.data.avgDailyCount.toString(),
              unit: waterData.data.avgDailyCountUnit
            },
            { 
              title: '上月处理量',
              value: waterData.data.lastMonthCount.toString(),
              unit: waterData.data.lastMonthCountUnit,
            }
          ],
        ]
      },
      {
        title: '药剂消耗(次氯酸钠)',
        rows: [
          [
            { 
              title: '上月使用量', 
              value: disinfectantData.data.lastMonth.toString(),
              unit: disinfectantData.data.lastMonthUnit
            },
            { 
              title: '本年使用量', 
              value: disinfectantData.data.currentYear.toString(),
              unit: disinfectantData.data.currentYearUnit
            }
          ]
        ]
      },
      {
        title: '危险废物(污泥)',
        rows: [
          [
            { 
              title: '本月产生量', 
              value: sludgeData.data.currentMonth.toString(),
              unit: sludgeData.data.currentMonthUnit
            },
            { 
              title: '暂时储存量',
              value: sludgeData.data.tempStore.toString(),
              unit: sludgeData.data.tempStoreUnit
            },
            { 
              title: '本年产生量', 
              value: sludgeData.data.currentYear.toString(),
              unit: sludgeData.data.currentYearUnit
            }
          ]
        ]
      },
      {
        title: '电能消耗',
        rows: [
          [
            { 
              title: '上月累计', 
              value: electricityData.data.lastMonth.toString(),
              unit: electricityData.data.lastMonthUnit
            },
            { 
              title: '本年累计', 
              value: electricityData.data.currentYear.toString(),
              unit: electricityData.data.currentYearUnit
            }
          ]
        ]
      }
    ]
  } catch (e) {
    error.value = true
    console.error('数据加载失败:', e)
  } finally {
    loading.value = false
  }
}

// 跳转到氚云系统
const goToH3Yun = (type) => {
  if (['处理水量', '药剂消耗', '电能消耗'].includes(type)) {
    window.open('https://www.h3yun.com/application/D001729axy20rsfk5k9fndomy/D288422RunDataRecords')
  } else {
    window.open('https://www.h3yun.com/application/D001729axy20rsfk5k9fndomy/ub2bcca79db9a4152871a312eb4db5cda')
  }
}

function startTimer() {
  // 清除可能存在的旧定时器
  if (timer.value) {
    clearInterval(timer.value)
  }
  // 设置新的定时器，5分钟 = 300000毫秒
  timer.value = window.setInterval(() => {
    fetchData()
  }, 300000)
}

onMounted(() => {
  fetchData()
  startTimer()
})

onUnmounted(() => {
  // 组件卸载时清除定时器
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

<style scoped lang="scss">
.dashboard-container {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  height: 100%;
  padding: 5px 5px 0 5px;
  border: solid 1px #00509e;
}

.category {
  border-radius: 0;
  margin-bottom: 10px;
  padding: 5px;
  background: rgba(0, 53, 102, 0.3);
  .dashboard-card {
    cursor: pointer;
  }
}

.category:nth-child(1) {
  // border-left: 4px solid #1e90ff;
  .category-title {
    color: #1e90ff;
  }
  .dashboard-card {
    background: linear-gradient(90deg, rgba(30, 144, 255, 0.2), rgba(30, 144, 255, 0.4));
    border-left: 2px solid #1e90ff;
  }
}

.category:nth-child(2) {
  // border-left: 4px solid #32cd32;
  .category-title {
    color: #32cd32;
  }
  .dashboard-card {
    background: linear-gradient(90deg, rgba(50, 205, 50, 0.2), rgba(50, 205, 50, 0.4));
    border-left: 2px solid #32cd32;
  }
}

.category:nth-child(3) {
  // border-left: 4px solid #ff8c00;
  .category-title {
    color: #ff8c00;
  }
  .dashboard-card {
    background: linear-gradient(90deg, rgba(255, 140, 0, 0.2), rgba(255, 140, 0, 0.4));
    border-left: 2px solid #ff8c00;
  }
}

.category:nth-child(4) {
  // border-left: 4px solid #ffd700;
  .category-title {
    color: #ffd700;
  }
  .dashboard-card {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.4));
    border-left: 2px solid #ffd700;
  }
}

.category-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 8px;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.w50 {
  width: 50%;
}

.dashboard-card {
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  flex: 1;
  margin: 0 5px;
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-value {
  margin-top: 6px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .unit {
    display: inline-block;
    font-size: 14px;
    opacity: 0.8;
  }
}
</style>
